<template>
  <div class="IndividualShare">
    <!-- 头部 -->
    <div class="Individ">
      <div class="Individ-top">
        <div class="top-up">
          <div class="up-left">
            <span style="font-size: 22px;  color: #1e2024">
              {{
              securitiesMsg.name
              }}
            </span>
            <span style="font-size: 22px; color: #1e2024">
              {{
              securitiesMsg.stockcode
              }}
            </span>
            <span style="font-size: 18px; color: #e93030">
              {{
              price
              }}
            </span>
            <span
              style="font-size: 18px;font-weight: 400"
              :style="{
              color: `${ securitiesMsg.close > 0 ? '#E93030':'#0E9D58' }`,
            }"
            >{{ securitiesMsg.close }}%</span>
            <el-popover placement="top-start" width="200" trigger="hover" style="padding: 0;">
              <div class="plate">
                <ul>
                  <li @click="userFolderDialog = true" class="firstLi">新建自选板块</li>
                  <li
                    v-for="(item, index) in  userFolderList"
                    :key="index"
                    @click="changeActive(item)"
                    :class="active.id == item.id ? 'active' : ''"
                  >{{ item.name }} ({{item.cou}})股</li>
                </ul>
              </div>
              <button style="margin-left: 17px" slot="reference">加自选</button>
            </el-popover>
          </div>
          <div class="up-right">
            <autocomplete :code="code" :flag="true" @getlist="changeCode"></autocomplete>
          </div>
        </div>
      </div>
      <div class="Individ-buttom">
        <div class="Individ-buttom-list">
          <div class="list">
            <span class="lable">
              总市值
              <span>{{ securitiesMsg.marketcap }}亿元</span>
            </span>
            <span class="lable">
              年高跌
              <el-tooltip class="item" effect="light" content="相比一年内最高价下跌 %" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
              <span
                :style="{color:securitiesMsg.niangaozhang>0?'#e93030':'#0e9d58' }"
              >{{ securitiesMsg.niangaozhang }}%</span>
            </span>
            <span class="lable">
              历史涨停
              <span>{{ securitiesMsg.zongzhangting }} 次</span>
            </span>
          </div>
          <div class="list">
            <span class="lable">
              流通市值
              <span>{{ securitiesMsg.circulation_cap }}亿元</span>
            </span>
            <span class="lable">
              年低涨
              <el-tooltip class="item" effect="light" content="相比一年内最低价上涨 %" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
              <span
                :style="{color:securitiesMsg.niandizhang>0?'#e93030':'#0e9d58' }"
              >{{ securitiesMsg.niandizhang }}%</span>
            </span>
            <span class="lable">
              近一年涨停
              <span>{{ securitiesMsg.nianzhangting }}次</span>
            </span>
          </div>
          <div class="list">
            <span class="lable">
              上市地址
              <span>{{ securitiesMsg.exchange }}</span>
            </span>
            <span class="lable">
              年初至今
              <span
                :style="{color:securitiesMsg.nianchuzhijin>0?'#e93030':'#0e9d58' }"
              >{{ securitiesMsg.nianchuzhijin }}%</span>
            </span>
            <span class="lable">
              近一个月涨停
              <span>{{ securitiesMsg.yuezhangting }}次</span>
            </span>
          </div>
          <div class="list">
            <span class="lable">
              上市板块
              <span>{{ securitiesMsg.market }}</span>
            </span>
            <span class="lable">
              5日
              <span
                :style="{color:securitiesMsg.zhangfu5ri>0?'#e93030':'#0e9d58' }"
              >{{ securitiesMsg.zhangfu5ri }}%</span>
            </span>
            <span class="lable">
              近一周涨停
              <span>{{ securitiesMsg.zhouzhangting }}次</span>
            </span>
          </div>
          <div class="list">
            <span class="lable">
              实控人
              <span>{{ securitiesMsg.corporate_owner }}</span>
            </span>
            <span class="lable">
              10日
              <span
                :style="{color:securitiesMsg.zhangfu10ri>0?'#e93030':'#0e9d58' }"
              >{{ securitiesMsg.zhangfu10ri }}%</span>
            </span>
            <span class="lable"></span>
          </div>
        </div>
        <p class="buttom-b">
          <span class="plate">概念板块</span>
          <!-- <span class="substance">{{ securitiesMsg.concept }}</span> -->
          <span class="substance">{{ securitiesMsg.concept }}</span>
        </p>
      </div>
    </div>
    <!-- 列表 -->
    <div class="IndividualShare_main">
      <div class="tabList">
        <div class="tabList_menu">
          <div
            class="tabs"
            v-for="(item, index) in menuList"
            :key="index"
            @click="tabchange(item.component)"
          >
            <span :class="activeName == item.component ? 'active' : ''">
              {{
              item.name
              }}
            </span>
          </div>
        </div>
        <div class="tabList_right">
          <span slot="label">
            <el-button class="btn share" round @click="share">
              <img src="../assets/export.png" alt class="img" />
              <span class="text">分享</span>
            </el-button>
            <el-button class="weChat" @click="showWeChat">
              <img src="../assets/wechat.png" alt /> 微信下单
            </el-button>
          </span>
        </div>
      </div>
      <div class="main">
        <component :is="activeName" @securities="securities" ref="component" :code="code"></component>
      </div>
    </div>
    <!-- 新建自选 -->
    <el-dialog title="新建自选板块" :visible.sync="userFolderDialog" width="30%" class="userFolderDialog">
      <div class="title">板块名称:</div>
      <el-input size="mini" v-model="stockcode"></el-input>
      <div class="warning">
        <i class="el-icon-warning"></i>
        支持300个板块，可同步到手机
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveUserStock">确 定</el-button>
        <el-button @click="userFolderDialog = false">取 消</el-button>
      </span>
    </el-dialog>
    <weChatOrder ref="weChatOrder"></weChatOrder>
  </div>
</template>
<script>
import vanilla from "../components/IndividualShare/vanilla";
import snowball from "../components/IndividualShare/snowball";
import { vanilla1, search } from "@/api/index.js";
import mixins from "@/mixins/index";
import {
  folder,
  save_folder,
  save_folder_join
} from "../api/OptionalStock/index";
import { save_user_stock } from "@/api/MarketPlace/index";
import autocomplete from "../components/autocomplete.vue";
import weChatOrder from "../components/weChatOrder.vue";
export default {
  name: "IndividualShare",
  mixins: [mixins],
  components: {
    vanilla,
    snowball,
    autocomplete,
    weChatOrder
  },
  data() {
    return {
      activeName: "vanilla",
      securitiesMsg: {
        name: "",
        stockcode: "",
        addprice: "",
        close: "",
        marketcap: "",
        circulation_cap: "",
        niangaozhang: "",
        niandizhang: "",
        concept: ""
      },
      menuList: [
        {
          name: "香草",
          component: "vanilla"
        },
        {
          name: "雪球",
          component: "snowball"
        }
      ],
      code: "000001",
      price: "",
      //编号
      input1: "",
      form: {
        num: 10000,
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      radio: "",
      input: "",
      userFolderList: [],
      active: {},
      userFolderDialog: false,
      stockcode: "",
      num: 1.0
    };
  },
  created() {
    this.code = this.$route?.query?.code;
    this.getlist();
    this.getfolder();
  },
  watch: {
    activeName(n) {
      if (n == "vanilla") {
        this.$nextTick(() => {
          this.$refs.component.herb();
        });
      }
    }
  },
  methods: {
    beforeLeave(visitName) {
      if (visitName === "button") {
        return false;
      }
    },
    securities(res) {
      this.securitiesMsg = res;
      this.Init();
    },
    Init() {
      this.socket = new WebSocket("wss://dev.kizokulife.com/wss"); // 进行连接，连接的结果和状态在下面的onopen、onmessage、onclose
      let that = this; // 因为下面使用了普通函数，存在this指向问题，所以我就把vue的当前实例给that了，that的使用和this一样，就看成this就行
      this.socket.onopen = function() {
        if (that.socket.readyState === 1) {
          that.socket.send(that.securitiesMsg.symbol.toString());
        }
        this.heart = setInterval(() => {
          if (that.socket.readyState === 1) {
            that.socket.send(that.securitiesMsg.symbol.toString());
          }
        }, 1000 * 30); // 每隔30秒就向服务器发送消息
      };
      this.socket.onmessage = function(res) {
        console.log(res);
        var price = JSON.parse(res.data)[0].price;
        that.price = price;
        that.securitiesMsg.close = `${(
          ((price - that.securitiesMsg.close_price) /
            that.securitiesMsg.close_price) *
          100
        ).toFixed(2)}`;
        that.$set(
          that.securitiesMsg,
          "addprice",
          (price - that.securitiesMsg.close_price).toFixed(2)
        );
      };
    },
    tabchange(name) {
      this.activeName = name;
    },
    async getlist() {
      const { data } = await vanilla1({ code: this.code });
      this.securitiesMsg = data;
      this.$nextTick(() => {
        this.Init();
        this.$refs.component.herb();
      });
    },
    changeCode(e) {
      this.code = e ? e : this.code;
      let path = this.$router.history.current.path;
      this.$router.push({ path, query: { code: this.code } }).catch(err => err);
      this.getlist();
    },
    async getfolder() {
      const { data } = await folder();
      this.userFolderList = data.user_folder_list;
    },
    async changeActive(item) {
      this.active = item;
      const data = await save_user_stock({
        folder_id: item.id,
        stockcode: this.securitiesMsg.stockcode
      });
      if ((data.msg = "设置成功")) {
        this.$message({
          type: "success",
          message: "设置成功"
        });
      } else {
        this.$message({
          type: "error",
          message: data.msg
        });
      }
    },
    async saveUserStock() {
      const data = await save_folder_join({
        name: this.stockcode,
        stockcode: this.securitiesMsg.stockcode
      });
      if (data.msg == "保存成功") {
        this.$message({ type: "success", message: data.msg });
      } else {
        this.$message({ type: "error", message: data.msg });
      }
      this.userFolderDialog = false;
      this.stockcode = "";
    },
    share() {
      this.$refs.component.stocksDialog = true;
    },
    showWeChat() {
      this.$refs.weChatOrder.dialogVisible = true;
    }
  }
};
</script>
<style lang="less" scoped>
.IndividualShare {
  width: 100%;
  background: #e1e7ed;
  height: 100%;
  padding: 15px;
  box-sizing: border-box;
  // 头部
  .Individ {
    width: 1000px;
    min-height: 220px;
    background: #ffffff;
    border-radius: 10px;

    &-top {
      width: 1000px;
      height: 63px;
      line-height: 63px;
      box-sizing: border-box;

      .top-up {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #f7f7f7;
        box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;

        .up-left {
          margin-left: 25px;

          span {
            padding-right: 8px;
          }

          button {
            width: 70px;
            height: 30px;
            background: #3377ff;
            border-radius: 2px;
            border: none;
            margin-right: 10px;
            color: #ffffff;
          }
        }
        .up-right {
          width: 210px;
          height: 35px;
          border-radius: 4px;
          display: flex;
          align-items: center;
          margin-right: 25px;
          .up-input {
            font-size: 14px;
          }
          /deep/ .el-input__inner {
            border-radius: 42px;
            background: #fff;
            border: unset;
            height: 35px;
            line-height: 35px;
          }
        }
      }
    }

    &-buttom {
      text-align: left;
      padding-left: 25px;
      font-size: 12px;
      color: #999999;
      padding-top: 15px;

      &-list {
        width: 100%;
        height: 90px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;

        .list {
          width: 20%;
          height: 90px;
          border-right: 1px solid #ccc;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          padding-left: 27px;
          font-size: 14px;

          &:nth-child(1) {
            padding: 0;
          }

          &:last-child {
            border: 0;
          }

          .lable {
            display: block;
            width: 100%;
            color: #999;

            span {
              color: #1570e8;
              margin-left: 5px;
            }
          }
        }
      }

      .buttom-b {
        width: 100%;
        padding-bottom: 20px;
        .plate {
          color: #999;
          font-size: 14px;
        }

        .substance {
          color: #1570e8;
          margin-left: 5px;
          font-size: 14px;
        }
      }
    }
  }

  // 列表
  &_main {
    // width: 100%;
    width: 1000px;
    height: auto;
    border-radius: 10px;
    background-color: #fff;
    margin: 16px 0 30px 0;

    .tabList {
      width: calc(100% - 50px);
      height: 60px;
      margin: 0 25px;
      display: flex;
      justify-content: space-between;
      border-bottom: 2px solid #eff1f5;
      box-sizing: border-box;

      &_menu {
        width: 280px;
        height: 100%;
        text-align: left;
        color: #999999;
        display: flex;

        .tabs {
          height: 100%;
          margin-right: 25px;
          cursor: pointer;

          span {
            display: block;
            height: 100%;
            line-height: 60px;
          }

          .active {
            color: #111111;
            position: relative;

            &::after {
              content: "";
              position: absolute;
              width: 100%;
              height: 2px;
              background: #397dff;
              bottom: -1px;
              left: 50%;
              transform: translateX(-50%);
            }
          }
        }
      }

      &_right {
        width: 430px;
        height: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .btn {
          min-width: 80px;
          height: 32px;
          line-height: 20px;
          background: #3377ff;
          border-radius: 2px;
          border: none;
          margin-right: 6px;
          color: #fff;
          position: relative;
          cursor: pointer;
          padding: 6px 16px;
          font-size: 13px;

          img {
            margin-top: 4px;
            position: absolute;
          }

          .btn-spa {
            margin-left: 15px;
          }
        }

        .weChat {
          background: #28c445;
          border-radius: 35px;
          color: #fff;
          height: 32px;
          padding: 6px 18px;

          img {
            width: 16px;
            height: 13px;
          }
        }

        .share {
          width: 86px;
          border-radius: 48px;
          background: #ecf2ff;
          color: #3377ff;
          padding: 6px 18px;

          .img {
            width: 13px;
            height: 13px;
            display: block;
            margin-right: 10px;
          }

          .text {
            display: block;
            margin: 1px 0 0 13px;
            font-size: 15px;
          }
        }
      }
    }

    .main {
      width: 1000px;
    }
  }

  //下单
  .placeOrder {
    /deep/ .el-dialog__header {
      text-align: left;
      border-bottom: 1px solid #e4e7ec;
    }

    /deep/ .el-dialog__body {
      .order {
        border-bottom: 1px solid #ccc;

        &_head {
          height: 30px;
          width: 100%;
          display: flex;
          justify-content: space-between;
          padding-left: 20px;
          box-sizing: border-box;
          margin-bottom: 20px;

          &_left {
            height: 100%;
            line-height: 40px;

            .title {
              margin-right: 10px;
            }
          }

          &_right {
            .el-input__inner {
              background: #f7f7f7;
            }
          }
        }

        &_foot {
          height: 40px;
          width: 100%;
          display: flex;
          justify-content: space-between;
          padding-left: 20px;
          box-sizing: border-box;

          &_left {
            .el-button {
              width: 64px;
              margin: 0;
            }
          }

          &_right {
            display: flex;
            align-items: center;
            margin-left: 50px;
            margin-bottom: 20px;
            box-sizing: border-box;

            .el-radio__label {
              display: flex;
              justify-content: space-between;
              align-items: center;
            }

            .optimal {
              display: block;
              width: 47px;
              height: 24px;
              background: #d24850;
              margin-left: 10px;
              color: #fff;
              line-height: 24px;
              text-align: center;
            }

            .market {
              .el-input__inner {
                width: 76px;
                background: #f7f7f7;
              }
            }

            .el-radio {
              display: flex;
              justify-content: space-between;
              align-items: center;
            }

            .importprice {
              width: 183px;
              background: #f3f3f3;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .el-input--mini {
                width: 90px;
                border: unset;
              }

              .el-input__inner {
                height: 30px;
                width: 90px;
                background: #f7f7f7;
                border: unset;
              }
            }
          }
        }

        &_content {
          width: 100%;
          height: 63px;
          background: #f3f3f3;
          border-radius: 4px 4px 4px 4px;
          opacity: 1;
          border: 1px solid #ffffff;
          margin-bottom: 20px;
        }
      }
    }
  }

  .userFolderDialog {
    /deep/.el-dialog__header {
      background: #3e4346;
      text-align: left;
      height: 32px;
      box-sizing: border-box;
      padding: 0px 20px 0px 20px;
      display: flex;
      align-items: center;

      .el-dialog__headerbtn {
        top: 5px;
      }

      .el-dialog__title {
        color: #fff;
      }
    }

    /deep/ .el-dialog__body {
      padding-bottom: 0;

      .title {
        color: #000000;
        font-size: 15px;
        text-align: left;
        height: 30px;
      }

      .warning {
        height: 40px;
        line-height: 40px;
        text-align: left;
        color: #000000;

        .el-icon-warning {
          color: #0081db;
          font-size: 16px;
        }
      }
    }
  }

  .jiegou {
    /deep/ .el-button {
      margin-right: 10px;
      margin-left: 0;
    }
  }
}

.plate {
  width: 202px;

  ul {
    list-style: none;
    margin: 0;
    padding-left: 20px;
    background: #f0f0f0;
    .firstLi {
      width: 100%;
      height: 32px;
      border-bottom: 1px solid #ccc;
      line-height: 32px;
    }
    li {
      list-style: none;
      background: #fff;
      height: 21px;
      cursor: pointer;
      padding-left: 10px;
      &:hover {
        background: #1570e8;
        color: #fff;
      }
    }

    .active {
      background: #1570e8;
      color: #fff;
    }
  }
}
</style>
<style scoped>
.el-popover {
  padding-left: 0;
}
</style>
